<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        left-arrow
        title="关于小懒猪记账"
        @click-left="$router.go(-1)"
      />
    </header>
    <div class="content">
      <img src="../../../lib/img/my_SetUp/guanzhu@2x.png" alt="" class="img">
      <!-- 按钮 -->
      <van-button type="primary" size="large" class="but" color="#fdd949"
      @click="followFn">关注小懒猪记账微信公众号</van-button>
      <!-- 弹窗 -->
      <van-popup v-model="show">
        <div class="followcontent">
          请在微信右上角“添加朋友”中点击“公众号” 搜索”小懒猪记账”，关注后互动
        </div>
        <div class="followBut">
          <button @click="cancelFn" class="butcan">取消</button>
          <button @click="confirmFn" class="butcon">确认</button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { Button, NavBar, Popup } from 'vant'
Vue.use(Button)
Vue.use(NavBar)
Vue.use(Popup)
export default {
  // 设置data初始值
  data () {
    return {
      show: false
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    followFn () {
      this.show = true
    },
    // 取消按钮
    cancelFn () {
      this.show = false
      // console.log('取消')
    },
    // 确定按钮
    confirmFn () {
      this.show = false
      // console.log('确认')
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  /deep/ .van-nav-bar {
    height: .5rem;
    line-height: 0.5rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  .content {
    position: relative;
    .img {
      height: 2.20rem;
      width: 3.00rem;
      position: absolute;
      top: 40%;
      left: 50%;
      margin-top: -1.10rem;
      margin-left: -1.50rem;
    }
    // 关注按钮
    .but {
      width: 2.50rem;
      height: .49rem;
      position: absolute;
      bottom: 25%;
      left: 50%;
      margin-left: -1.25rem;
      // 按钮文字
      .van-button__text {
        color: black;
        font-size: .16rem;
      }
    }
    // 弹出
    /deep/ .van-popup {
      height: 1.5rem;
      width: 3.0rem;
      border-radius: .20rem;
      // 弹出窗内容
      .followcontent {
        width: 2.66rem;
        height: .47rem;
        margin: .37rem auto;
        font-size: .15rem;
      }
      // 弹出窗按钮
      .followBut {
        float: right;
        padding-right: .15rem;
        font-size: .16rem;
        button {
          width: .60rem;
          height: .30rem;
          border: 0;
          background-color: #ffffff;
          // 取消按钮
          &:nth-child(1) {
            margin-right: .10rem;
          }
          // 点击时效果
          &:active{
            background-color: #c4c4c4;
          }
        }
      }
    }
  }
  // /deep/ .van-dialog {
  //   height: 1.5rem;
  //   width: 3.0rem;
  // }
</style>
